<!DOCTYPE html>
<html>
<head>
    <title>Phong 材质</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.min.js"></script>
    <script>
        /** Phong材质:是符合Phong光照模型的材质。和Lambert不同的是，Phong模型考虑了镜面放射的
         *效果，因此对于金属、镜面的表现尤为适合。
         *
         *
         *
         * */
        function init(){
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            var scene = new THREE.Scene();

            var camera = new THREE.OrthographicCamera(-5,5,3.75,-3.75,0.1,100);
            camera.position.set(5,25,25);
            camera.lookAt(new THREE.Vector3(0,0,0));
            scene.add(camera);

            //光源
            var light = new THREE.PointLight(0xfffff,1,100);
            light.position.set(10,15,5);
            scene.add(light);
            //MeshPhongMaterial()
            /*var material = new THREE.MeshPhongMaterial({
                color:0xffff00,
                specular:0xff0000,
                shininess:1000  //光照模型的n值，shininess值越大时，高光的光斑越小，默认值为30
            });

            var sphere = new THREE.Mesh(new THREE.SphereGeometry(3,20,8),material);
            scene.add(sphere);*/

            /**  法向材质 MeshNormalMaterial()  */
            var material = new THREE.MeshNormalMaterial();
            var cube = new THREE.Mesh(new THREE.CubeGeometry(3,3,3),material);
            scene.add(cube);

            renderer.render(scene,camera);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="mainCanvas" style="width: 800px;height: 600px;"></canvas>
</body>
</html>